import './FromExcel.scss'
import { Button, App } from 'antd'
import { useMount } from "ahooks";
import { useRequest } from 'alova/client';
import { useRef, useState } from "react";
import { Http } from '../../Utils/Api';


import { refreshStore } from '../../Config/zustand'


const { GC, ttxVideoAll, location } = window
GC.Spread.Common.CultureManager.culture('zh-cn')


const config = {
    ribbon: [
        // {
        //     "id": "home",
        //     "text": "开始",
        //     "buttonGroups": [
        //         {
        //             "thumbnailClass": "ribbon-thumbnail-editing",
        //             "commandGroup": {
        //                 "children": [
        //                     {
        //                         "command": "editingFind",
        //                         "type": "dropdown",
        //                         "children": [
        //                             "find",
        //                             "replace",
        //                             "goto",
        //                             "gotoSpecial"
        //                         ]
        //                     }
        //                 ]
        //             }
        //         }
        //     ],
        // "visibleWhen": "!TableSheetActive && !DataManagerActive && !ContainMultipleHeaderCells || IsInTableSheetDesignMode"
        // }
    ],
    contextMenu: [],
    fileMenu: 'fileMenuButton',
    sidePanels: [
        {
            position: 'top',
            allowResize: true,
            command: 'formulaBarPanel',
            uiTemplate: 'formulaBarTemplate',
        },
        {
            position: 'bottom',
            command: 'statusBarPanel',
            uiTemplate: 'statusBarPanelTemplate',
        },
    ],
}



const FromExcel = ({ data, Off }) => {
    const { notification } = App.useApp()
    const { updateRefresh } = refreshStore()
    const ExcelBox = useRef()
    const WorkBox = useRef()
    const { get, pos, params } = data.url

    const [spread, setSpread] = useState()
    const [ExcelName, setExcelName] = useState()
    const [loading, setLoading] = useState(false)

    const { send } = useRequest(({ url, params }) => Http({ url, params, headers: { responseType: 'blob' } }), { immediate: false })
    const { send: post } = useRequest(({ url, params }) => Http({ url, params }), { immediate: false })

    useMount(() => {
        const spread = new GC.Spread.Sheets.Workbook(WorkBox.current, { sheetCount: 1 })
        setSpread(spread)
        // 获取excel入参补全
        send({ url: get, params }).then(res => {
            const { blob, filename } = res
            setExcelName(filename)
            const excelIo = new GC.Spread.Excel.IO()
            excelIo.open(blob, workbookObj => spread.fromJSON(workbookObj))
        })
        new GC.Spread.Sheets.Designer.Designer(ExcelBox.current, '', spread)
    })

    const saveExcel = () => {
        const excelIo = new GC.Spread.Excel.IO()
        excelIo.save(spread.toJSON(), e => saveAs(e, ExcelName))
    }

    const submitExcel = () => {
        setLoading(true)
        const excelIo = new GC.Spread.Excel.IO()

        excelIo.save(spread.toJSON(), e => {
            const forms = new FormData()
            const { type } = e
            const file = new File([e], ExcelName, { type })
            forms.append('File', file)
            forms.append('FileType', 3)
            post({ url: pos, params: forms }).then(async res => {
                updateRefresh(new Date().getTime())
                const excelIo = new GC.Spread.Excel.IO()
                excelIo.open(res.data, workBook => spread.fromJSON(workBook))
                notification.success({ key: 'fromModify', message: '操作成功', description: res.message })
                setLoading(false)
                Off()
            })
        })
    }

    const onPrint = () => spread.print()

    return (
        <div className="FromExcel">
            <div className="Excel" ref={ExcelBox} />
            <div className="Work" ref={WorkBox} />
            <div className="options">
                <Button onClick={saveExcel}>下载Excel</Button>
                {pos && (
                    <Button loading={loading} type="primary" onClick={submitExcel}>
                        保存信息
                    </Button>
                )}
                <Button onClick={onPrint}>打印</Button>
            </div>
        </div>
    );
};

export default FromExcel;